<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 作用域插槽允许子组件向父组件传递数据，父组件可以在插槽内容中访问这些数据并进行使用。这实现了父子组件间更灵活的数据传递和模板定制。 -->
        <h1> 父组件 - {{title}} </h1>
        <hr>
        <box>
            <!-- data 是 slot 标签传递过来的所有数据 -->
            <!-- 2. 通过插槽接收值，data 是传递过来的所有数据，data 是自己起的名字，是一个对象，属性
             就是传递过来的数据名称,插槽slot没起名字，就是默认插槽，用#defalut -->
             <!-- 接到数据也可以解构，#default="{msg,a,b}" -->
            <template #default="data">
                <!-- 3. 使用数据，可以使用 data. 的方式获取，也可以结构出来 -->
                插槽 {{title}} - {{data.msg}} - {{data.a}} - {{data.b}}
            </template>
        </box>
    </div>
</body>

<template id="box">
    <div>
        <h1>子组件 - {{title}} </h1>
        <hr>
        <!-- 1. 定义 slot 的时候通过属性的方式将值传递到父组件模板中 -->
        <slot :msg="title" a="哈哈哈" :b="100" :c="false"></slot>
    </div>
</template>

<script>

    const box = {
        template: '#box',
        data() {
            return {
                title: '你好世界'
            }
        },
    }


    const app = {
        data() {
            return {
                title: '你好中国'
            }
        },
        methods: {},
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>